<template>
  <div class="datav-nav">
    <div class="header-img">
      <img class="nav-img-text" :src="NavImgText" />
      <div class="nav-img"></div>
    </div>
  </div>
</template>
<script lang="tsx" setup>
  import NavImgText from '/@/assets/images/nav-img-text.png';
</script>
<style lang="less" scoped>
  .datav-nav {
    display: flex;
    position: absolute;
    top: 0;
    flex-direction: column;
    background: var(--datav-body-bg);
    width: 100%;
    height: 290px;

    .nav-img-text {
      z-index: 1;
      transform-origin: 0 0;
      transform: scale(0.5);
      top: 80px;
      left: 40px;
      position: absolute;
      user-select: none;
      cursor: pointer;
    }

    .nav-img {
      position: absolute;
      width: 100%;
      height: 290px;
      background-size: cover;
      background-position: center;
      background-image: url(/@/assets/images/nav-img.png);
    }
  }
</style>
